<template>
	<view class="main">
		<view class="search box box-align-center box-pack-start" style="margin-bottom: 10px;">
			<u-input v-model="searchText" @input="getschools" type="text" :border="border" :custom-style="customStyle"
				placeholder="搜索学校" />
		</view>
		<view class="card box box-tb" v-for="(item,i) in  page.list" :key="i">
			<view class="card-top box box-pack-between">
				<view class="box box-pack-start box-align-center">
					<u-image shape="circle"
						:src="item.logo !=null?item.logo:'https://yhlyy.oss-cn-beijing.aliyuncs.com/B75EDB51EE004485A4E38D29935D0C64%E4%B8%8B%E8%BD%BD.jpg?Expires=4838041950&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=yOrJwQiO%2BdL1l7Xf%2BlkQpubxqyk%3D'"
						width="120rpx" height="120rpx"></u-image>
					<view class="box box-tb box-pack-start box-align-start ml10">
						<view class="class-name" style="word-break: break-all;">
							{{item.name}}
						</view>
						<view class="box box-pack-around box-align-center mt10">
							<view class="class-info box box-pack-around box-align-center">
								<u-image src="@/static/home/icon_stu.png" width="29rpx" height="24rpx">
									<u-loading slot="loading"></u-loading>
								</u-image>
								<span
									style="margin-left: 5px;font-size: 11px;line-height: 26rpx;">{{item.userNum}}用户</span>
							</view>
						</view>
					</view>
				</view>

				<view class="btn box box-align-center" @click="selectschool(item)">
					<u-image src="@/static/home/icon_change.png" width="27rpx" height="27rpx">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<u-icon name="weixin-circle-fill" size="80" color="#05e326" @click.stop="openPop(item)"></u-icon>

			</view>
			<!-- <view class="card-bottom box box-pack-between box-align-center">
				<view class="box box-align-center">
					课程任务
					<view class="num">
						{{item.cousTaskNum}}
					</view>
				</view>
				<view class="posr box box-align-center">
					实践任务
					<view class="num">
						{{item.ldsjTaskNum}}
					</view>
				</view>
			</view> -->
		</view>
		<u-popup v-model="fxShow" mode="bottom" height="192px" border-radius="24">
			<div class="box box-tb box-align-center fx">
				<div class="mb10 mt20">分享到</div>
				<div class="box box-align-center">
					<div class="mr10 ml10 box box-tb box-align-center">
						<button open-type="share">
							<u-image width="45px" height="45px"
								src="https://yhykt.oss-cn-beijing.aliyuncs.com/E9B1158464424528B120E668941BC48Cafead635b3db8e9599d7445a2997769.png?Expires=4809034324&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=JNUIIK%2BU73Ee65XW1RniWCQsYX0%3D">
							</u-image>
							<div>微信好友</div>
						</button>
					</div>
					<!-- <div class="box box-tb box-align-center">
						<u-image width="50px" height="50px" src="https://yhykt.oss-cn-beijing.aliyuncs.com/CA887680FEEC435488A24CDB270CB01877265cb05938d5fdd836cc5ecec42a3.png?Expires=4809034468&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=8Ts29DDay7jenfSpJMhL7%2F1FEQ0%3D"></u-image>
						<div>朋友圈</div>
					</div> -->
				</div>
				<div class="mt20" @click="fxShow = false">取消</div>
			</div>

		</u-popup>
		<canvas canvas-id="canvas"
			style="position: absolute; top: -1000px; left: -1000px;width: 225px; height: 180px;"></canvas>
		<u-loadmore :status="status" />

	</view>
</template>

<script>
	import {
		makeCanvas
	} from "../../common/canvas.js";
	export default {
		data() {
			return {
				// user:uni.getStorageSync("user"),
				url: "https://heroes.nosdn.127.net/a/images/2020/7/28/ed8237653d64482cbe6608839fac0182.jpg",
				user: uni.getStorageSync('user'),
				role: uni.getStorageSync('role'),
				searchText: '',
				page: {
					list: [],
					pageNum: 1,
					pageSize: 10
				},
				customStyle: {
					width: 'auto',
					height: '45rpx',
					lineHeight: '45rpx',
					backGround: '#7686F6',
					borderRadius: '17rpx',
					padding: '10rpx 20rpx',
					marginLeft: '30rpx'
				},
				status: 'loadmore',
				fxShow: false,
				info: {
					name: '',
					logo: ''
				}
			}
		},
		onLoad() {
			this.getschools();
		},
		onShareAppMessage(res) {
			// return {
			// 	title: this.info.name,
			// 	path: '/pages/index/index',
			// 	imageUrl: this.info.logo
			// }
			let shareMessage = {
				title: this.info.name,
				path: '/pages/index/index',
				imageUrl: this.info.logo
			}
			return new Promise((resolve, reject) => {
				uni.showLoading({
					title: '请求分享数据',
					icon: 'none'
				})
				makeCanvas(shareMessage.imageUrl).then(imgPath => {
					//console.log(imgPath);
					uni.hideLoading()
					resolve({
						title: shareMessage.title,
						path: shareMessage.path,
						imageUrl: imgPath
					})
				}).catch(err => {
					uni.hideLoading()
					resolve({
						title: shareMessage.title,
						path: shareMessage.path,
						imageUrl: this.info.logo
					})
				})
			})

		},
		//下拉刷新
		onPullDownRefresh() {
			this.page.pageSize = 10
			this.getschools();
		},
		onReachBottom(e) {
			this.fenye()
		},
		methods: {
			openPop(item) {
				this.fxShow = true;
				//console.log(item);
				this.info.name = item.name;
				this.info.logo = item.logo != null ? item.logo :
					'https://yhlyy.oss-cn-beijing.aliyuncs.com/B75EDB51EE004485A4E38D29935D0C64%E4%B8%8B%E8%BD%BD.jpg?Expires=4838041950&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=yOrJwQiO%2BdL1l7Xf%2BlkQpubxqyk%3D'
			},
			getschools() {
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				})
				this.$api.post({
					url: '/yschool/teampagelist'
				}, {
					schoolid: this.user.schoolId,
					searchText: this.searchText,
					pageSize: this.page.pageSize
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.page = res.page;
						this.status = 'loadmore'
						this.info.name = res.page.list[0].name;
						this.info.logo = res.page.list[0].logo
						if (this.page.pageNum >= this.page.pages) {
							this.status = 'nomore'
							this.page.pageSize = 10
						}
					}
				})
			},
			fenye() {
				if (this.page.pageNum >= this.page.pages) return;
				this.status = 'loading';
				this.page.pageSize = this.page.pageSize + 10;
				//console.log(this.page.pageSize);
				this.getschools()
			},
			selectschool(item) {
				wx.vibrateShort();
				uni.setStorage({
					key: 'currSchool',
					data: item
				});
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.card {
		padding: 35rpx;
		margin-bottom: 20rpx;
		height: 200rpx;
		background-color: #fff;
		box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
		border-radius: 30rpx;

		.card-top {
			height: 180rpx;
			box-sizing: border-box;
			// border-bottom: 2rpx solid #F0F1F8;

			.class-name {
				font-size: 30rpx;
				font-weight: 600;
			}

			.class-info {
				padding: 10rpx 20rpx;
				// width: 124rpx;
				height: 45rpx;
				border-radius: 10px;
				color: #6E73D8;
				font-size: 26rpx;
			}

			.btn {
				width: 30rpx;
				height: 26rpx;
				line-height: 26rpx;
				color: #626BF1;
			}

		}

		.card-bottom {
			height: 150rpx;
			padding-left: 50px;
			padding-right: 50px;

			.num {
				font-size: 48rpx;
				margin-left: 10px;
			}

			.posr {
				position: relative;

				.tips {
					position: absolute;
					top: -36rpx;
					right: -130rpx;
					width: 140rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #FF5A77;
					border-radius: 26rpx;
					font-size: 20rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}

	.icon {
		width: 14rpx;
		height: 128rpx;
		background: #8A8DF3;
		box-shadow: 4rpx 1rpx 13rpx 0px #626BF1;
		border-radius: 7rpx;
	}

	.search {
		width: 710rpx;
		height: 86rpx;
		background: #F3F4FB;
		border-radius: 43rpx;
	}

	.fx button {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
	}

	/deep/ .fx button::after {
		border: none;
	}
</style>